<template>
    <rx-dialog @ok="handleCompleteCheck" @cancel="closeWindow"
               :okText="$ti18('rxForm.commitBtn','提交')"
               :btnAlign="'center'">
        <rx-fit>
            <template #middle>
                <div class="task-batch-center">
                    <div class="task-batch-grid">
                        <span class="task-batch-span">{{i18n('taskApply.selectTask_1','已选择')}}<span style="color: #4285F4;padding: 0px 5px">{{selectedRows.length}}</span>{{i18n('taskApply.selectTask_2','任务')}}</span>
                        <rx-grid ref="table"
                                 :data="taskList"
                                 :hasPage="false"
                                 :columns="columns"
                                 height="auto"
                                 v-model:checkRowKeys="selectedRows"
                                 :selectConfig="{type:'checkbox'}"
                                 field="taskId"
                        >
                            <template #applicantNo="{ row }">
                                <div class="task-applicantNo">
                                    <div class="task-icon"><my-icon type="iconVue3_user"></my-icon></div>
                                    <rx-user-info  style="font-size: 16px;color: #303030" :userId="row.applicantNo"/>
                                </div>
                            </template>
                            <template #action="{ row }">
                                <RxGridAction :size="2">
                                    <a @click.stop="handleTask(row)">{{ i18n('list.handle', '办理') }}</a>
                                </RxGridAction>
                            </template>
                        </rx-grid>

                    </div>
                    <div class="task-batch-textarea">
                        <span class="task-batch-span">{{ i18n('taskApply.opinion', '意见') }}</span>
                        <a-textarea :placeholder="i18n('taskApply.opinion','请填写意见','write')" v-model:value="form.opinion"
                                    :rows="8"></a-textarea>
                    </div>
                </div>
            </template>
        </rx-fit>
    </rx-dialog>
</template>
<script>
import {Util, RxDialog, RxLayout,RxFit} from "@lowcode/jpaas-base-lib";
import BpmtaskApi from '@/common/api/bpm/bpmTask';
import BpmTaskExecutors from "@/views/modules/bpm/components/BpmTaskExecutors.vue";
import FlowUtil from "@/views/modules/bpm/js/FlowUtil.js"
import BpmExecutors from "@/views/modules/bpm/components/BpmExecutors.vue";
import {RxUserInfo} from "@lowcode/jpaas-share-component";


export default {
    name: 'task-batch-approve',
    mixins: [FlowUtil],
    components: {
        BpmExecutors,RxUserInfo,
        RxDialog,BpmTaskExecutors
    },
    props: {
        layerid: String,
        lydata: Object,
        destroy: Function,
        bpmTask: Object
    },
    data() {
        return {
            labelCol: {span: 4},
            wrapperCol: {span: 8},
            form: {
                taskIds: this.taskIds,
                checkType: "AGREE",
                opinion: ""
            },
            columns: [
                {
                    title: this.i18n('form.itemTitle', '事项标题'),
                    field: 'subject',
                    minWidth: 200,
                    ellipsis: false,
                },
                {
                    title: this.i18n('form.sendTime', '发送时间'),
                    field: 'createTime',
                    minWidth: 100,
                },
                {
                    title: this.i18n('form.startUser', '发起人'),
                    field: 'applicantNo',
                    minWidth: 80,
                    slots: {default: 'applicantNo'},
                },
                {
                    title: this.$ti18('rxList.action', '操作'),
                    field: 'action',
                    minWidth: 60,
                    slots: {default: 'action'},
                }
            ],
            taskList: [],
            //已选择任务详情
            tasksInfo: [],
            statusMap: {
                0: {color: 'blue', text: this.i18n('statusMap.notApproved', '未审批')},
                1: {color: 'green', text: this.i18n('statusMap.approvedSuccess', '审批成功')},
                2: {color: 'red', text: this.i18n('statusMap.approvedFailure', '审批失败')},
            },
            selectedRows: [],
            initTask:{},
            baseTask:{},
        }
    },
    created() {
        this.baseTask = this.bpmTask;
        this.getTaskInfo();
    },
    methods: {
        i18n(name, text, key) {
            return this.$ti18(name, text, "MyBpmTask", key);
        },
        initTaskFun(res){
            let self_ = this;
            self_.baseTask = self_.initTask;
            self_.getTaskInfo();
            self_.showMessage(res);
        },
        //获取多个（合并）任务所有明细
        getTaskInfo() {
            let self_ = this;
            BpmtaskApi.getBatchTasksInfo(this.baseTask.taskId).then(res => {
                if (res && res.length > 0) {
                    self_.taskList = res;
                }
            });
        },
        closeWindow() {
            Util.closeWindow(this, 'cancel');
        },
        handleTask(record) {
            this.openInst(record.appId, record.instId, record.taskId);
        },
        getInitTask(taskIds) {
            let task = this.taskList.find(item => {
                return !taskIds.contains(item.taskId);
            });
            return task;
        },
        showMessage(res) {
            let status = res.code;
            let message = res.message;
            switch (status) {
                case 0:
                    this.$message.success(message);
                    break;
                case -1:
                    this.$message.error(message);
                    break;
                case 1:
                    this.$message.warn(message);
                    break;
            }
        },
        handleCompleteCheck(vm) {
            var self_ = this;
            let rows =this.selectedRows;
            if (rows.length == 0) {
                vm.loading = false;
                this.$message.warning(this.i18n('msa.unEnforceableTask', '无可执行的任务!'));
                return;
            }
            var taskIds = rows.map(item => {
                return item.taskId;
            });
            var isEnd = false;
            if (rows.length == self_.taskList.length || rows.length == (self_.taskList.length - 1)) {
                isEnd = true;
            } else {
                self_.initTask = this.getInitTask(taskIds);
            }
            self_.form.taskIds = taskIds.join(",");
            self_.form.checkType = "AGREE";
            this.$confirm({
                title: this.$ti18('rxMsa.tipsInfo', '提示信息'),
                content: this.i18n('msa.confirmApplyTips', '确认审批吗?'),
                okText: this.$ti18('rxForm.ackBtn', '确认'),
                cancelText: this.$ti18('rxForm.cancelBtn', '取消'),
                zIndex: 30000,
                onOk() {
                    BpmtaskApi.batApprove(self_.form).then(res => {
                        vm.loading = false;
                        if (isEnd) {
                            Util.closeWindow(self_, "ok");
                        } else {
                            self_.initTaskFun(res);
                        }
                    })
                },
                onCancel() {
                    vm.loading = false;
                }
            });

        },
        del(index) {
            this.tasksInfo.splice(index, 1);
        }
    }
}
</script>
<style scoped>
.task-applicantNo{
    display: flex;
    align-items: center;
}
.task-icon{
    width: 23px;
    height: 23px;
    color: white;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: #4d9eff;
    margin-right: 5px;
}
.task-batch-center{
    display: flex;
    flex-direction: column;
    overflow: auto;
    height: 100%;
    width: 100%;
}
.task-batch-grid{
    overflow: auto;
    margin-bottom: 20px;
}
.task-batch-textarea{
    flex: 1;
}
.task-batch-span{
    display: block;
    height: 25px;
    font-size: 15px;
}
</style>
